iT邦幫忙

2022 iThome 鐵人賽

DAY 22
0

Relative Layout 就是相對布局,以相對位置的方式進行設計,先來看看實作例子。
以下例子為Relative Layout與Linear Layout 的結合應用。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:paddingLeft="10dp" android:paddingRight="10dp" android:paddingTop="20dp" android:paddingBottom="100dp"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="Hello World!"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_marginLeft="100dp"
        android:layout_alignParentRight="true"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="200dp"
        android:text="Hello World!"
        android:layout_alignParentBottom="true"/>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingTop="100dp"
        tools:context=".MainActivity">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:text="Hello World!" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:text="Hello World!" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:text="Hello World!" />
    </LinearLayout>
</RelativeLayout>

實作結果為

補充說明:灰色大框線就是我在Relative Layout設定所需用到的版面範圍,而我把Linear Layout寫在Relative Layout的範圍裡面,所以會有三個Hello World!以垂直方式連續呈現。

margin與padding的差別:
android:layout_marginBottom 物件與下方的間距
android:layout_marginTop 物件與上方的間距
android:layout_marginLeft 物件與左邊的間距
android:layout_marginRight 物件與右邊的間距
android:paddingBottom 物件內下方的padding
android:paddingTop 物件內上方的padding
android:paddingLeft 物件內左邊的padding
android:paddingRight 物件內右邊的padding


今天教學到這邊,我們明天再見!


上一篇
[Day21] Android Studio Linear Layout實作
下一篇
[Day23] Android Studio Constraint Layout實作
系列文
新手學 Swift UI 與 Android Studio 的學習路程 -- 跟著我們一起踏上 App 開發之旅吧~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言